<template>
  <div class="partner">
    <header class="partner_header">
      <span class="partner_header_title">学习好友</span>
      <section class="partner_header_action">
        <van-icon name="underway-o" class="partner_header_action_icon" @click="handleGoToAddRecord" />
        <van-icon name="friends-o" class="partner_header_action_icon" @click="handleGoToAddFriend" />
      </section>
    </header>
    <section class="partner_search">
      <van-search v-model="value" show-action placeholder="搜索好友" @search="onSearch" @cancel="onCancel" />
    </section>

    <main class="partner_main">
      <template v-if="shipList.length > 0">
        <van-swipe-cell v-for="item in shipList" :key="item?.id">
          <Card>
            <section class="partner_main_list_item">
              <section class="partner_main_list_item_content">
                <img class="partner_main_list_item_avatar"
                  :src="item?.friendId === userId ? item?.sendAvatar : item?.receiveAvatar" />
                <span class="partner_main_list_item_name">{{ item?.friendId === userId ? item?.sendNickName :
                  item?.receiveNickName }}&nbsp;</span>
                <template v-if="item?.friendId === userId">
                  <van-tag plain type="primary" v-if="item?.sendSex === 1">男</van-tag>
                  <van-tag plain color="pink" v-if="item?.sendSex === 2">女</van-tag>
                </template>
                <template v-else>
                  <van-tag plain type="primary" v-if="item?.receiveSex === 1">男</van-tag>
                  <van-tag plain color="pink" v-if="item?.receiveSex === 2">女</van-tag>
                </template>
              </section>
              <van-icon name="chat-o" class="partner_main_list_item_action" @click="handleGoToMessage(item)" />
            </section>
          </Card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(item)" />
          </template>
        </van-swipe-cell>
      </template>
      <van-empty v-else description="暂无好友，快去添加一个吧" />
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showConfirmDialog, showToast } from 'vant';
import { useRouter } from "vue-router";
import Card from '@/components/Card/index.vue';
import { getShipList, deleteShip } from '@/apis/ship';
import { getUserInfo } from '@/apis/user';


const router = useRouter();

const userId = ref(null);
const value = ref('');

const shipList = ref([]);

const onSearch = async () => {
  try {

    const res = await getShipList({
      status: 2,
      pageNum: 1,
      pageSize: 9999,
      searchValue: value.value
    });
    if (res?.code === 200) {
      shipList.value = res?.data?.list;
    }
  } catch (error) {
    console.log(error, 'search-error');

  }
};

const onCancel = () => {
  value.value = '';
  init();
};


const init = async () => {
  try {
    const res = await getShipList({
      status: 2,
      pageNum: 1,
      pageSize: 9999
    });
    if (res?.code === 200) {
      shipList.value = res?.data?.list;
    }
  } catch (error) {
    console.log(error, 'init-error');

  }
};
const getUerInfo = async () => {
  try {
    const res = await getUserInfo();
    if (res?.code === 200) {
      userId.value = res?.data?.id;
    }
  } catch (error) {
    console.log(error, 'getUerInfo-error');

  }
}

const handleDelete = (item) => {
  console.log(item, 'item');

  showConfirmDialog({
    title: "温馨提示",
    message: "确定删除该用户吗？",
    confirmButtonColor: "#f50"
  })
    .then(async () => {
      try {
        const res = await deleteShip(item?.id);
        if (res?.code === 200) {
          showToast('删除成功');
          init();
          return;
        }
        showToast(res?.msg);
      } catch (error) {
        console.log(error, 'delete-error');

      }
    }).catch(() => { });
};

const handleGoToAddFriend = () => {
  router.push('/add/friend');
};
const handleGoToAddRecord = () => {
  router.push('/apply/record');
};

const handleGoToMessage = (item) => {
  router.push(`/message/${item?.friendId}/${item?.userId === userId.value ? item?.friendId: item?.userId}`);
};
onMounted(() => {
  init();
  getUerInfo();
});

</script>

<style lang="less" scoped>
.partner {
  &_header {
    height: 48px;
    background-color: #fff;
    display: flex;
    box-sizing: border-box;
    padding: 8px;
    justify-content: space-between;
    align-items: center;

    &_action {
      width: 56px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &_icon {
        font-size: 22px;
      }
    }
  }

  &_main {
    margin-top: 8px;

    &_list {
      &_item {
        height: 48px;
        width: 98%;
        margin: 0 auto;
        border-bottom: 1px #eee solid;
        box-sizing: border-box;
        padding: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_content {
          display: flex;
          align-items: center;
          width: 200px;
        }

        &_name {
          margin-left: 8px;
          color: #333;
          font-size: 14px;
        }

        &_avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        &_action {
          font-size: 28px;
          color: #4A90E2;
        }
      }
    }
  }
}

.delete-button {
  height: 100%;
}
</style>
